@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/play/variables"

#spell-palette-view
  position: absolute
  z-index: 7
  @include transition(top $level-resize-transition-time ease, width $level-resize-transition-time ease)
  box-shadow: 10px 4px 4px black
  left: 10px
  right: 10px
  padding: 0 4px 0 3%

  #level-view.real-time &, #level-view.cinematic &
    display: none
    visibility: hidden

  body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
    .rtl-right-aligned
      text-align: right

  .properties-scroll-container
    overflow-y: scroll

  .code-palette-background
    width: 100%
    //height: 100%
    height: 592px
    position: absolute
    left: 0px
    z-index: -1
    background: transparent url(/images/level/code_palette_wood_background.png) no-repeat
    //background-size: 100% 100%
    background-size: 100% 592px
    overflow: visible
    margin-top: -20px

  &.controls-disabled
    .code-palette-background
      @include filter(brightness(75%))

    > :not(.code-palette-background)
      @include opacity(0.50)

  h4
    color: white
    font-size: 16px
    line-height: 16px
    margin: 25px 0 5px 2px
    font-weight: normal
    text-transform: uppercase

  .code-palette-label
    position: absolute
    left: 2.4vw
    top: 1.9vw
    z-index: 4
    font-family: $headings-font-family
    text-transform: uppercase
    color: #e7e7e7
    font-size: 1.5vw

  .properties
    @include flexbox()
    @include flex-wrap()
    @include flex-column()
    @include flex-align-content-start()

    .property-entry-item-group
      display: inline-block
      min-height: 38px
      width: 212px
      @include flexbox()
      @include flex-wrap()
      @include flex-center()
      position: relative
      background-color: rgb(20, 13, 8)
      margin: 1px
      overflow: hidden

      img.item-image
        width: 38px
        height: 38px
        position: absolute
        top: 0px

      &:not(:hover) img.item-image
        -webkit-filter: contrast(50%) sepia(100%) saturate(500%) hue-rotate(7deg)
        filter: contrast(50%) sepia(100%) saturate(1000%) hue-rotate(7deg)

      .spell-palette-entry-view
        margin-left: 38px
        width: 174px
        width: -webkit-calc(100% - 38px)
        width: calc(100% - 38px)
        padding-right: 10px
        // TODO: width and padding-right aren't working well; sometimes it is truncated too early, sometimes too late

  &.shortenize .properties
    .property-entry-item-group
      width: 175px

      .spell-palette-entry-view
        width: calc(100% - 38px)

  &.web-dev .properties
    .property-entry-item-group
      width: 100px

      .spell-palette-entry-view
        margin-left: 0
        width: 100px

  &.shortenize .properties.hide-images
    .property-entry-item-group
      width: calc(175px - 38px)

      .item-image
        display: none

      .spell-palette-entry-view
        width: 100%
        margin-left: 0

